<template>
  <div class="wh-flow-header">
    <div class="wh-flow-header-left">
      <i class="el-icon-arrow-left" @click="onClickBack"></i>
      <div class="wh-flow-header-left-des">
        <!-- <p>{{name}}</p> -->
        <!-- <span>最近保存: 6分钟前</span> -->
      </div>
    </div>
    <div class="wh-flow-header-middle" v-if="showMiddleInfo">
     <!-- <el-tabs v-model="current" @tab-click="onChangeTab">
        <el-tab-pane name="info" label="基础信息"></el-tab-pane>
        <el-tab-pane name="design" label="流程设计"></el-tab-pane>
      </el-tabs> -->
      <!-- <el-steps :active="current" simple>
        <el-step icon="el-icon-edit" title="基础信息"></el-step>
        <el-step icon="el-icon-upload" title="流程设计"></el-step>
      </el-steps> -->
      <div class="wh-flow-header-middle-item" :class="{'wh-item-complete': index<current, 'wh-item-active': index==current}" v-for="(item, index) in tabList" :key="index">
        <p class="wh-flow-header-middle-item-line"></p>
        <p class="wh-flow-header-middle-item-sort" @click="handleClickTab(index)">{{index+1}}</p>
        <p class="wh-flow-header-middle-item-name" @click="handleClickTab(index)">{{item.name}}</p>
      </div>
    </div>
    <div class="wh-flow-header-right">
      <div v-show="!publishDisabled">
        <el-button class="wh-flow-header-right-btn" size="small" type="primary" @click="onPublish">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabList: [
        {
          name: '基础信息'
        },
        {
          name: '流程设计'
        }
      ]
    }
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    publishDisabled: {
      type: Boolean,
      default: false
    },
    showMiddleInfo: {
      type: Boolean,
      default: true
    }
  },
  // watch: {
  //   value: {
  //     handler (newValue, oldValue) {
  //       this.current = newValue
  //     },
  //     immediate: true
  //   }
  // },
  methods: {
    onPublish () {
      this.$emit('on-publish')
    },
    onChangeTab (e) {
      this.$emit('input', e.name)
    },
    onClickBack () {
      this.$emit('on-back')
    },
    handleClickTab (index) {
      this.current = index
      this.$emit('on-change', index)
    }
  },
}
</script>

<style scoped lang="scss">
  $themeColor: #409EFF;
  $themeLightColor: #EAF3FE;
  .wh-flow-header {
    position: absolute;
    background: #FFFFFF;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    text-align: left;
    height: 50px;
    border-bottom: 1px solid #E4E7ED;
    align-items: center;
    z-index: 999;
    &-left {
      width: 150px;
      height: 50px;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        margin-right: 10px;
      }
      &-des {
        display: flex;
        flex-direction: column;
        p {
          font-size: 16px;
          color: #333333;
        }
        span {
          font-size: 14px;
          color: #999999;
        }
      }
    }
    &-middle {
      width: 50%;
      max-width: 400px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      &-item:nth-child(1) {
        // flex-direction: row-reverse;
        .wh-flow-header-middle-item-line {
          display: none;
        }
      }
      .wh-item-complete {
        .wh-flow-header-middle-item-line {
          background-color: $themeColor;
        }
        .wh-flow-header-middle-item-sort {
          background-color: $themeLightColor;
          color: $themeColor;
        }
      }
      .wh-item-active {
        .wh-flow-header-middle-item-line {
          background-color: $themeColor;
        }
        .wh-flow-header-middle-item-sort {
          background-color: $themeColor;
          color: #FFFFFF;
        }
        .wh-flow-header-middle-item-name {
          color: #000000;
          font-weight: 500;
        }
      }
      &-item {
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        &:hover {
          .wh-flow-header-middle-item-name {
            color: $themeColor;
          }
        }
        &-line {
          max-width: 60px;
          min-width: 30px;
          height: 1px;
          background: #999999;
          flex-shrink: 1;
          margin: 0 10px;
        }
        &-sort {
          flex-shrink: 0;
          width: 28px;
          height: 28px;
          background: rgb( 242,243,245);
          color: rgb( 78,89,105);
          // margin: 0 10px;
          margin-right: 10px;
          border-radius: 14px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        &-name {
          flex-shrink: 0;
          width: 64px;
          font-size: 16px;
          cursor: pointer;
        }
      }

      ::v-deep .el-steps {
        background: #FFFFFF;
      }
    }
    &-right {
      width: 150px;
      height: 50px;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
</style>
